<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:none;}
.big{ width:920px; height:320px; position:absolute; left:50%; top:50%; margin-left:-460px; margin-top:-160px; border:1px solid black; overflow:hidden;}
.big .sMove{  height:300px; position:absolute;left:0; top:0;transition:0.5s all ease;}
.big .sMove li{ width:920px; height:300px; float:left;}
.big .sNav{ width:920px; height:20px; position:absolute; bottom:0; left:0; background:black;}
.big .sNav ol{ width:220px; height:10px; margin:5px auto;}
.big .sNav ol li{ width:50px; height:10px; margin-right:5px; background:white; float:left; cursor:pointer;}
.big .sNav ol li div{ width:0; height:10px; background:#3CF;}
</style>

<title>Untitled Document</title>
</head>

<body>
<div class="big" id="big">
	<ul class="sMove" id='sUl'>
    	<li style="background:green"></li>
        <li style="background:yellow"></li>
        <li style="background:blue"></li>
        <li style="background:red"></li>
    </ul>
    <div class="sNav" id='sNav'>
    	<ol>
        	<li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ol>
    </div>
</div>

<script type="text/javascript">
    var allLi = sNav.getElementsByTagName('li');
    var allDiv = sNav.getElementsByTagName('div');

    sUl.style.width = sUl.children.length * sUl.children[0].offsetWidth + 'px';
    var Index = 0;
    var needWidth = 0;
    var Timer = null;
    move();
    function move(){
        clearInterval(Timer);
        Timer = setInterval(function(){
            if(needWidth == 100){
                for(var i = 0;i < allDiv.length;i++){
                    allDiv[i].style.width = 0;
                }
                needWidth = 0;
                Index++;
                if(Index == allDiv.length)Index = 0;

                sUl.style.left = -Index * sUl.children[0].offsetWidth + 'px';
            }
            allDiv[Index].style.width = needWidth+'%';
            needWidth++;
        },10);
    }

    for(var i = 0;i < allLi.length;i++){
        allLi[i].index = i;
        allLi[i].onmouseover = function(){
             clearInterval(Timer);
        };
        allLi[i].onmouseout = move;
        allLi[i].onclick = function(){
            for(var i = 0;i < allDiv.length;i++){
                allDiv[i].style.width = 0;
            }
            Index = this.index;
            needWidth = 0;
            sUl.style.left = -this.index * sUl.children[0].offsetWidth + 'px';
        }
    }

</script>
</body>
</html>
